<template>
  <div class="flex gap-2">
    <Input :readonly="record?.componentProps?.readonly" v-model:value="data" />
    <Button @click="handleEdit">编辑</Button>
    <CalcInputModal
      v-model:visible="visible"
      v-if="visible"
      :data="data"
      @success="handleSuccess"
    />
  </div>
</template>
<script setup lang="ts">
  import { ref, computed, PropType } from 'vue';
  import { pluginManager } from '/@/views/formDesigner/utils';
  import CalcInputModal from './CalcInputModal.vue';

  const Input = pluginManager.getComponent('input');
  const Button = pluginManager.getComponent('button');

  const emit = defineEmits(['update:modelValue']);
  const props = defineProps({
    modelValue: {
      type: String as PropType<String>,
      default: '',
    },
    record: {
      type: Object as PropType<Object>,
      default: () => {
        return {};
      },
    },
  });
  const data = computed({
    get() {
      console.log('props', props);
      console.log('props.modelValue', props.modelValue);
      return props.modelValue;
    },
    set(e) {
      console.log('eee', e);
      emit('update:modelValue', e);
    },
  });

  const visible = ref(false);
  const handleEdit = () => {
    visible.value = true;
    console.log('handleEdit visible', visible.value);
  };
  const handleSuccess = (val) => {
    data.value = val;
  };
</script>
